// AppMenu.js
import React from 'react';
import { Button, Layout, Menu } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import Menus from '../../configs/Menus';
import { useNavigate } from 'react-router-dom';

const { Sider } = Layout;

const AppMenu = ({ collapsed, toggleCollapsed }) => { // 接收props
    const navigate = useNavigate();

    const handleMenuClick = (menu) => {
        navigate(menu.key);
    };

    return (
        <Sider
            width={190}
            collapsed={collapsed}
            style={{ background: 'white' }}
        >
            <div className="toggle-btn-container" style={{
                height: 48,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderBottom: '1px solid #e8e8e8'
            }}>
                <Button
                    type="text"
                    onClick={toggleCollapsed}
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    style={{ color: '#1890ff' }}
                />
            </div>
            <Menu
                mode="inline"
                items={Menus.filter(item => item.isShow)}
                onClick={handleMenuClick}
                style={{ borderRight: 0 }}
            />
        </Sider>
    );
};

export default AppMenu;